<template>
  <div id="views">
    <div id="topBg"></div>
    <div id="content">
      <section id="sec1">
        <p class="name"><!--{{insuranceContract.name}}-->算力宝</p>
        <p class="order">NO.{{newInsuranceOrder.order_id}}</p>
        <p class="manager">合约销售方：BHPAY</p>
        <span class="workStatus">
          <span v-if="newInsuranceOrder.settlement_state == 2" class="canletext">已取消</span>
          <span v-if="newInsuranceOrder.settlement_state == 0" class="workingtext">进行中</span>
          <img v-if="newInsuranceOrder.settlement_state == 1" src="../../common/imgs/iconqqadx.png" class="stausImg"  alt="图片"/>
        </span>
      </section>
      <section id="sec2">
        <p class="title">合约信息</p>
        <p>
          <span>保障总算力</span>
          <span class="showMoreItem">{{newInsuranceOrder.power}}T</span>
        </p>
        <p>
          <span class="baozhangLimit">保障下限({{insuranceContract.stop_loss_rate}}%)</span>
          <span class="digtime">{{newInsuranceOrder.productBottom}}{{newInsuranceOrder.pay_currency_code}}</span>
        </p>
        <p>
          <span>合约周期</span>
          <span class="calculateSource">{{newInsuranceOrder.date_num}}天</span>
        </p>
        <p>
          <span>合约期限</span>
          <span class="calculateTime" style="flex-wrap:wrap;">{{machine.addServiceCreateTime}}至{{machine.addServiceEndTime}}</span>
        </p>
        <p>
          <span>下单时间</span>
          <span class="sartTime">{{newInsuranceOrder.create_time}}</span>
        </p>
        <p>
          <span>合约费用</span>
          <span class="contractPrice">{{newInsuranceOrder.payMoney}}</span>
        </p>
        <p class="seeAgs" style="display: none">
          <span>
            查看<a href="javascript:void  0;" @click="getAgreement">《合约条款》</a>
          </span>
        </p>
      </section>
      <section id="sec3">
        <p class="title">产出统计</p>
        <p class="p2">
          <span>已产出{{hasWorkDays}}天</span>
          <span>距离结算<span>{{leftWorkDays}}</span>天</span>
        </p>
        <p class="range">
          <span :style="{width : rangeWidth}"></span>
        </p>
        <p class="allProduct">
          <span>{{machine.btcIncomeNum}} BTC</span>
          <span>&nbsp;≈￥{{allProductCny}}</span>
        </p>
      </section>
      <section id="sec4">
        <p class="title" style="border-bottom: 0.015rem solid#F5F6F8">结算统计</p>
        <div class="content" v-if="newInsuranceOrder.settlement_state == 1">
          <p>
            <span>结算类型</span>
            <span class="overStyle" v-if="newInsuranceOrder.settlement_type == 2" style="color: rgba(52, 188, 123, 1);">
              算力宝补偿解锁
            </span>
            <span  v-if="newInsuranceOrder.settlement_type == 1" class="overStyle" style="color: rgba(52,188,123,1);">
              正常解锁
            </span>
          </p>
          <p>
            <span>结算币价</span>
            <span class="currencyPrice">
              <span>1 BTC</span>
              <span>≈ {{Number(newInsuranceOrder.settlement_coin_price)}} CNY</span>
            </span>
          </p>
          <p>
            <span>算力产出</span>
            <span>
              <span class="workBtcNum">{{machine.btcIncomeNum}}BTC</span>
              <span class="workBtcCny">≈{{pruductPrice}} CNY</span>
            </span>
          </p>
          <p>
            <span class="two">
              <span>合约成本</span>
              <span>矿机+电费包</span>
            </span>
            <span class="workBtcNumBtc">{{Number(newInsuranceOrder.degression)}}{{newInsuranceOrder.pay_currency_code}}</span>
          </p>
          <p>
            <span>保障金额({{newInsuranceOrder.security}}%)</span>
            <span class="outputRate">{{newInsuranceOrder.productBottom}}{{newInsuranceOrder.pay_currency_code}}</span>
          </p>
          <p>
            <span>算力宝补偿</span>
            <span>
              <span class="suanlibaoGet">{{newInsuranceOrder.compensation}} BTC</span>
              <span>≈{{newInsuranceOrder.compensationPrice}}{{newInsuranceOrder.pay_currency_code}}</span>
            </span>
          </p>
          <p>
            <span class="two">
              <span>实际结算</span>
              <span>算力产出+算力宝补偿</span>
            </span>
            <span>
              <span class="actualSettlement">{{newInsuranceOrder.settlement_amount}} BTC</span>
              <span class="actualSettlementCny">≈ {{newInsuranceOrder.settlement_amount_price}} CNY</span>
            </span>
          </p>
          <p>
            <span>结算时间</span>
            <span class="settlementTime">{{newInsuranceOrder.settlement_time}}</span>
          </p>
        </div>
        <div class="notOver" v-if="newInsuranceOrder.settlement_state == 0">还未结算</div>
        <div class="hasCancel" v-if="newInsuranceOrder.settlement_state == 2">算力宝已取消</div>
      </section>
    </div>
    <agree-ment ref="ag" hasReadText="已阅读"></agree-ment>
  </div>
</template>
<script>
  import {incrementAgreement} from '../../http/api'
  export default {
    name:'increment_detail',
    components: {
      AgreeMent: resolve => { require(['../../components/AgreeMent'], resolve)  }
    },
    data(){
      return{
        introduce : '增值服务详情',
        insuranceContract : '',//服务合约详情
        newInsuranceOrder : '',//算力包合约详情
        hasWorkDays : '',//已工作时间
        leftWorkDays : '',//剩余工作时间
        rangeWidth : '',
        machine : '',
        pruductPrice : '',
        allProductCny : '',
      }
    },
    mounted() {
      let query = this.$route.query,
        thiz = this,
        machine = JSON.parse(query.machine);
      // console.log('machine',query.machine)
      let insuranceContract = machine.insuranceContract;//服务合约详情
      var newInsuranceOrder = machine.newInsuranceOrder;//算力包合约详情
      newInsuranceOrder.power = thiz.sliceNum(newInsuranceOrder.power, 2);
      let lowerLimit = thiz.accDiv(thiz.accMul(newInsuranceOrder.security, newInsuranceOrder.degression), 100);
      newInsuranceOrder.productBottom = newInsuranceOrder.pay_currency_code == "CNY" ? thiz.sliceNum(lowerLimit, 2) : thiz.sliceNum(lowerLimit, 4);
      newInsuranceOrder.create_time = newInsuranceOrder.create_time.replace(/-/g, "/").split(' ')[0];
      // newInsuranceOrder.settlement_time = newInsuranceOrder.create_time.replace(/-/g, "/").split(' ')[0];
      newInsuranceOrder.create_time.replace(/-/g, "/");
      newInsuranceOrder.payMoney = (newInsuranceOrder.pay_currency_code == "CNY" ? thiz.sliceNum(newInsuranceOrder.pay_amount, 2) : thiz.sliceNum(newInsuranceOrder.pay_amount, 4)) + " " + newInsuranceOrder.pay_currency_code;
      thiz.hasWorkDays = machine.toNow;
      thiz.leftWorkDays = machine.toEnd;
      thiz.allProductCny = thiz.numSlice(thiz.accMul( machine.btcIncomeNum , machine.btcPrice) , 2);
      thiz.setRange();
      thiz.pruductPrice = thiz.sliceNum(
        thiz.accMul( machine.btcIncomeNum , newInsuranceOrder.settlement_coin_price) , 2
      );
      newInsuranceOrder.compensation = newInsuranceOrder.compensation ? newInsuranceOrder.compensation : 0;
      newInsuranceOrder.compensationPrice = thiz.sliceNum(
        thiz.accMul( newInsuranceOrder.compensation , newInsuranceOrder.settlement_coin_price) , 2
      );
      ///
      newInsuranceOrder.settlement_amount = newInsuranceOrder.settlement_amount ? newInsuranceOrder.settlement_amount : 0;
      newInsuranceOrder.settlement_amount_price = thiz.sliceNum(
        thiz.accMul( newInsuranceOrder.settlement_amount , newInsuranceOrder.settlement_coin_price) , 2
      );
      thiz.insuranceContract = insuranceContract;
      thiz.newInsuranceOrder = newInsuranceOrder;
      thiz.machine = machine;
    },
    methods:{
      getAgreement(){
        let thiz = this;
        incrementAgreement({id : thiz.newInsuranceOrder.contract_chinese_id}).then(res => {
          if( res.code == 200){
            thiz.$refs.ag.agreement(res.data.content || ' ');
          }
        })
      },
      setRange(){
        //得到range的宽度
        let hasWorkDays = this.hasWorkDays,//已工作时间
          leftWorkDays = this.leftWorkDays,//剩余工作时间
          allDays = this.accAdd(hasWorkDays ,leftWorkDays );
        this.rangeWidth = (Math.round(hasWorkDays / allDays * 10000) / 100.00 + "%");
      },
    }
  }
</script>
<style type="text/less" lang="less" scoped>
  #topBg{
    height: 2.24rem;background:#FF8A50;background: linear-gradient(to right, #F6C559, #FED16D);background: -webkit-linear-gradient(to right, #F6C559, #FED16D);
  }
  #content{
    padding: 0 0.3rem;padding-bottom: 0.3rem;margin-top: -1.6rem;
    >section{
      background: #fff;border-radius: 0.04rem;padding: 0 0.26rem;position: relative;margin-top: 0.16rem;
    }
    >#sec1{
      padding: 0.38rem 0.24rem;
      .name{
        font-size: 0.32rem;
      }
      .order{
        color: rgba(48,20,5,0.64);font-size: .24rem;padding-top: 0.3rem;
      }
      .manager{
        color: rgba(48, 20, 5, 0.66);font-size: .24rem;padding-top: 0.38rem;
      }
      .workStatus{
        position: absolute;right: 0.24rem;z-index: 1;top:0.38rem;display: inline-block;
        >span{
          width: 1.2rem;height: 0.48rem;border-radius: 0.08rem;text-align: center; line-height: 0.48rem;font-weight: 500;display: inline-block;
        }
        .canletext{
          color: #ED5A5A;background: rgba(237, 90, 90, 0.11);
        }
        .workingtext{
          background-color: rgba(66,170,121,0.1);color:#42AA79;
        }
        .stausImg{
          width: 1.18rem;
          height: 1.04rem;
        }
      }
    }
    >#sec2{
      padding: 0 0.26rem;padding-bottom: 0.35rem;
      >p{
        padding-top: 0.35rem;color: #8E979E;font-size: 0.26rem;
        >span:first-child{
          width: 38%;display: inline-block;
        }
        >span:last-child{
          color: #262626;
        }
      }
      >.title{
        font-size: 0.3rem;color: #262626;padding-top: 0.35rem;
      }
      >.seeAgs{
        >span:first-child{
          color: #8E979E;
        }
        a{
          color: #43b1f9;
        }
      }
    }
    >#sec3{
      padding: 0.36rem 0.26rem;
      .title{
        font-size: 0.3rem;
      }
      >.p2{
        overflow: hidden;padding-top: 0.36rem;
        >span{
          font-size: 0.24rem;
        }
        >span:first-child{
          float: left;color: #FEAC14;
        }
        >span:last-child{
          float: right;color: #8E979E;
          >span{
            color: #FEAC14;
          }
        }
      }
      .range{
        margin: 0.3rem 0;height: 0.035rem;background: #d7d7d7;
        >span{
          display: inline-block;background:#FFB733 ;height: 100%;border-radius: 0.1rem;float: left;
          /*transition:width 1s;*/
          /*-moz-transition:width 1s; !* Firefox 4 *!*/
          /*-webkit-transition:width 1s; !* Safari and Chrome *!*/
          /*-o-transition:width 1s; !* Opera *!*/
        }
      }
      >.allProduct{
        overflow: hidden;font-size: 0.24rem;
        >span:last-child{
          color: #8E979E;
        }
      }
    }
    #sec4{
      .title{
        font-size: 0.3rem;padding: 0.3rem 0;
      }
      >.content{
        padding-bottom: 0.3rem;
        >p{
          font-size: 0.24rem;overflow: hidden;padding-top: 0.24rem;
          >span:first-child{
            color: #8E979E;float: left;display: inline-block;width: 40%;
          }
          >span:last-child{
            float: left;
            >span:nth-child(2){
              color: #8E979E;
            }
          }
          >.two:first-child{
            >span{
              display: inline-block;width: 100%;
            }
            >span:nth-child(2){
              font-size: 0.18rem;
            }
          }
        }
        >p:first-child{
          padding-top: 0;
        }
      }
      >.notOver , >.hasCancel{
        padding: 0.9rem 0;text-align: center;font-size: 0.24rem;color: #8E979E;padding-top: 0.6rem;
      }
    }
  }
</style>
